<template>
  <div class="car-total chart-box1">
    <div class="chart-title">人车数量</div>
    <div class="chart-content">
      <div style="width: 100%">
        <a-row :gutter="12">
          <a-col :span="8">
            <div class="text-number-1">
              <div>实时人数</div>
              <div class="number">
                <count-to
                  :start-val="data.now_people_count.oldVal"
                  :end-val="data.now_people_count.newVal"
                  :duration="3000"
                />
              </div>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="text-number-1">
              <div>常驻人数</div>
              <div class="number">
                <count-to
                  :start-val="data.all_people_count.oldVal"
                  :end-val="data.all_people_count.newVal"
                  :duration="3000"
                />
              </div>
            </div>
          </a-col>
        </a-row>
        <a-row :gutter="12" style="margin-top: 1rem">
          <a-col :span="8">
            <div class="text-number-1">
              <div>实时停车数</div>
              <div class="number">
                <count-to
                  :start-val="data.now_car_count.oldVal"
                  :end-val="data.now_car_count.newVal"
                  :duration="3000"
                />
              </div>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="text-number-1">
              <div>车位数量</div>
              <div class="number">
                <count-to
                  :start-val="data.car_position_count.oldVal"
                  :end-val="data.car_position_count.newVal"
                  :duration="3000"
                />
              </div>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="text-number-1">
              <div>充电桩使用占比</div>
              <div class="number">
                <count-to
                  :start-val="data.charging_station_use_rate.oldVal"
                  :end-val="data.charging_station_use_rate.newVal"
                  :duration="3000"
                />
                %
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, onMounted, reactive, toRefs, watch } from "vue";
import { Decoration9 } from "@kjgl77/datav-vue3";
import CountTo from "../countTo/index.vue";
import common from "../../utils/common";
import store from "../../../../store";

export default defineComponent({
  name: "CarTotal",
  components: { Decoration9, CountTo },
  setup(props) {
    const state = reactive({
      data: {
        // 实时人数
        now_people_count: { ...common.countToInit },
        // 常驻人数
        all_people_count: { ...common.countToInit },
        // 实时停车数
        now_car_count: { ...common.countToInit },
        // 车位数量
        car_position_count: { ...common.countToInit },
        // 充电桩使用占比
        charging_station_use_rate: { ...common.countToInit },
      },
    });

    watch(
      () => store.getters.synthetical.PeoplePassTotal,
      (val) => {
        if (val) {
          getData();
        }
      }
    );

    const getData = () => {
      const { PeoplePassTotal } = store.getters.synthetical;
      if (PeoplePassTotal) {
        for (let key in PeoplePassTotal) {
          if (state.data[key]) {
            let newItem = {
              oldVal: state.data[key]["newVal"],
              newVal: Number(PeoplePassTotal[key]),
            };
            state.data[key] = { ...newItem };
          }
        }
        state.data.charging_station_use_rate.oldVal =
          state.data.charging_station_use_rate.newVal;
        state.data.charging_station_use_rate.newVal =
          PeoplePassTotal.charging_station_count
            ? Number(
                (
                  (Number(PeoplePassTotal.charging_station_use_count) /
                    Number(PeoplePassTotal.charging_station_count)) *
                  100
                ).toFixed(0)
              )
            : 0;
      }
    };

    const init = () => {
      getData();
    };

    init();

    return {
      ...toRefs(state),
    };
  },
});
</script>
<style lang="less" scoped>
@import "../../styles/common.less";
.car-total {
  .chart-content {
    display: flex;
    align-items: center;
  }
}
</style>
